/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* these are the site colors, replace them with anything you want!
 * this version is simplified for easier color swapping!*/
:root {
  --site-bg: url("images/startile.png");
  /*or like this for just a solid color:*/
  /*--site-bg: #FFE1C6; */
  
  --post-bg: white;
  --hover-color: #9EBC9E;
  --post-text: #553E4E;
  --button-bg: #FFAFC5;
  --border-color: #FFCFD2;
  --accent-color: #E0479E;
  --border-shadow: #9EBC9E;
  
  /*these next two colors are for when you highlight text on the page*/
  --selected-bg: #bde0ff;
  --selected-text: #5244c8;
}

/*the fonts used for this template are available here: 
 * https://fonts.google.com/specimen/Atkinson+Hyperlegible
 * https://fonts.google.com/specimen/Nunito
 * 
 * if you don't include these files in a "fonts" folder on your website, your browser will try to substitute the next closest thing...
*/
@font-face {
  font-family: Nunito;
  src: url('/fonts/Nunito-Black.ttf');
  font-weight: bold;
}
@font-face {
    font-family: Atkinson Hyperlegible;
    src: url('/fonts/AtkinsonHyperlegible-Regular.ttf');
}

@font-face {
    font-family: Atkinson Hyperlegible;
    src: url('/fonts/AtkinsonHyperlegible-Bold.ttf');
    font-weight: bold;
}

html {scroll-behavior: smooth;}
::selection {
  background: var(--selected-bg);
  color: var(--selected-text);
}
* {
  box-sizing: border-box;
  /*custom scrollbar colors~ i think it only works on some browsers tho...*/
  scrollbar-color: var(--accent-color) var(--post-bg);
  scrollbar-width: thin;
}

body {
  /*change the main font here*/
  font-family: 'Atkinson Hyperlegible', Verdana, Tahoma, sans-serif;
  font-size: 16px;
  margin: 0;
  background: var(--site-bg);
  color: var(--post-text);
  line-height: 1.6em;
  /*if you use a bg image, this will keep it from scrolling*/
  background-attachment: fixed;
}

/*use a special font for certain headings/buttons*/
h1,
nav,
.pinned summary {
  font-family: 'Nunito', Verdana, Tahoma, sans-serif;
  font-weight: bold;
}
/*use a pointer for the fake buttons*/
details > summary,
#tag-filters label {cursor: pointer;}

/*quick addon styles you can use in combination with anything*/
.center {text-align: center;}
.small-text {font-size: smaller;}
.no-border {border: none; padding:0;}

/*some parts of the layout can be hidden/shown depending on if you're on desktop or mobile*/
.mobile-only {display:none;}
.pc-only {display: block;}

/*this class makes stuff wrap around, very handy*/
.flex {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
/*this container will center the page contents better for larger screen sizes*/
#container {
  max-width:1200px;
  margin:auto;
}

main {
  /*here is the post width*/
  width: 600px;
  /*this part means it ignores all other elements when figuring out where to sit on the page*/
  position: absolute;
  /*because of that, we gotta tell it how much room to leave for the sidebar*/
  margin-left: 300px;
}

#sidebar {
  background: var(--border-color);
  margin-left: 20px;
  padding: 2em 1em;
  /*we left 300px of room for the sidebar, but we want the width to be less than that since there should be some spacing between*/
  width: 240px;
  
  /*i put dashed borders on each side, but you can change it to a different type or remove them*/
  border-inline: 2px dashed var(--accent-color);
  /*outlines go outside of the borders, so it makes it look like stitching on the edges. cute!*/
  outline: 4px solid var(--border-color);
  
  /*the sidebar doesn't scroll with the rest of the page*/
  position: fixed;
  /*this stacks it on top of everything else*/
  z-index: 99;
  /*make sure it takes up the whole screen vertically*/
  height: 100%;
  /*and add a scrollbar if someone's window is too short to see all the content*/
  overflow-y: auto;
}

#sidebar h1 {
  margin-block: .5em;
}
/*link text in the sidebar should be the same color*/
#sidebar a {
  color: var(--post-text);
}
/*font size for your name in the sidebar*/
#sidebar h1 a {
  font-size: 1.2em;
}
/*no underline for your name, or hovered links in sidebar*/
#sidebar h1 a,
#sidebar a:hover {text-decoration: none;}

/*center the icon in the sidebar*/
#icon {margin:auto;}
#icon img {
  /*this makes it a circle, lower the number for a rounded square*/
  border-radius:50%;
  max-width:200px;
}
/*these styles are for when your icon image is being used as a link, it just makes it react on mouseover*/
#icon a img {
  outline: 2px solid var(--border-color);
  /*adds animation to the outline*/
  transition: .2s;
}
#icon a img:hover {
  outline: 2px solid var(--post-text);
  outline-offset: 4px;
}

/*profile text doesnt need as much spacing as the posts do*/
#profile p {
  margin-block: .3em;
  line-height: 1.5em;
}
/*styling the simple bio block*/
#bio {
  border-block: 2px dashed var(--accent-color);
  padding-block: .5em;
  margin-block: 1em;
  font-size: small;
}

/*for the rounded link buttons!*/
#sidebar nav ul {
  text-align: center;
  vertical-align: middle;
  margin-top: 0;
  margin-bottom: 1em;
  padding: 0;
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 8px;
  justify-content: space-evenly;
}
#sidebar nav li a {
  /*set a width so they're the same size*/
  min-width: 120px;
  display: inline-block;
  background: var(--button-bg);
  color: var(--post-text);
  font-weight: bold;
  border-radius: 1rem;
  outline: 2px solid #fff0;
  transition: .2s;
  text-decoration: none;
}
#sidebar nav li a:visited {color: var(--post-text);}
#sidebar nav li a:hover {
  background: var(--hover-color);
  color: var(--accent-color);
  outline: 2px solid var(--post-text);
  outline-offset: 3px;
}
/*and add some spacing around them too*/
#sidebar nav {
  margin-block:1.5em;
}

 /*for the collapsible sections at the top (status and tag filters)*/
.pinned {
  background: var(--button-bg);
  font-size: smaller;
  padding: .5em;
  border-radius: 1em;
  margin: 1em 0;
  border: 2px solid var(--border-color);
  outline: 2px solid var(--post-bg);
  box-shadow: 2px 2px 6px var(--border-shadow);
}
/*the heading for those blocks*/
.pinned summary {
  color: var(--post-text);
  font-size: 1.5em;
  font-weight: bold;
  border-bottom: 2px dashed var(--border-color);
  margin: .5em;
}
/*since the summary uses the special font, switch back to the other one for the timestamp*/
.pinned time {
  font-family: 'Atkinson Hyperlegible', Verdana, Tahoma, sans-serif;
  float: right;
  font-weight: normal;
  font-size: small;
}

/*the list with the alternating colors! (cute!!!)*/
#status ul {
  background: var(--post-bg);
  margin:.5em;
  padding:.5em;
  border-radius: .5em;
}
#status li {
  list-style-type: none;
  padding: .2em;
}
/*list title, ie "reading:"*/
#status li:nth-child(odd) {
  font-weight: bold;
  font-size: 1.2em;
  color: var(--accent-color);
}
/*list answer, ie "books about magic"*/
#status li:nth-child(even) {
  background: var(--button-bg);
  color: var(--post-text);
  border-radius: .3em;
  padding-inline: .8em;
}
/*make links the same as in posts*/
#status li a {color: var(--post-text);}
#status li a:hover {text-decoration: none;}

/*finally the post styles!!!*/
.post {
  background: var(--post-bg);
  color: var(--post-text);
  border-radius: 1rem;
  padding: 0 .8rem .2rem .8rem;
  margin-bottom: 1em;
  box-shadow: 2px 2px 6px var(--border-shadow);
  min-width: 100%;
}
/*make sure images stay within the post*/
.post img {max-width:100%;}
/*add some space from the post header if you have an image first*/
.post div + img {margin-top: 1em;}

/*the top of the post where you put your username*/
.post-header {
  color: var(--accent-color);
  font-weight: bold;
  padding: .5rem 0;
  border-bottom: 2px dashed var(--border-color);
}
/*and the post's timestamp*/
.post time {
  float: right;
  font-weight: normal;
  font-size: smaller;
  margin: .2em;
}
/*link styling*/
.post a {color:var(--post-text);}
.post a:hover {text-decoration: none;}

/*this is for lists*/
.post li {
/*you can change the normal dot to anything you want :)*/
  /*list-style-type: "♥ ";*/
/*i used stars to match the bg image!*/
  list-style-image: url("images/star.png");
}

/*"read more" button for long posts*/
.readmore {
  margin-bottom: 1em;
}
.readmore summary {
  font-weight: bold;
  color: var(--accent-color);
  /*this gets rid of the arrow*/
  list-style-type: none;
}
/*hide the "read more" button after it's clicked (delete this line to keep it there)*/
.readmore[open] > summary {display:none;}
/*optional border to denote a border was there before*/
.readmore[open] {
  border-top: 2px dashed var(--button-bg);
  padding-top:1em;
}

.tags {
  border-top: 2px dashed var(--border-color);
  padding: .4em 0;
}
.tags a {color: var(--post-text);}
.tags span {color: var(--accent-color);}
.tags a,
.tags span {
  font-size: small;
  padding: .2em .5em;
  border-radius: 1em;
  text-decoration: none;
}
.tags a:hover {
  background:var(--button-bg);
  text-decoration: underline;
}

/*css for hiding posts*/
.tagged:has(input:checked) article {display: none;}

/*add new tags to filter here!
 * follow the class naming conventions (no spaces, don't start it with a number)
 * remember on the actual page you can write the tag however you want!*/
.tagged:has(#all:checked) article,
.tagged:has(#intro:checked) article[class~="intro"],
.tagged:has(#personal:checked) article[class~="personal"],
.tagged:has(#books:checked) article[class~="books"],
.tagged:has(#photos:checked) article[class~="photos"], 
.tagged:has(#art:checked) article[class~="art"] {display: inline-block;}

/*tag filter button styles (there's a lot)*/
#tag-filters label {
  background: var(--button-bg);
  border: 1px solid var(--accent-color);
  border-radius: .5em;
  display: inline-block;
  margin-left: .5em;
  margin-block: .3em;
  padding: 0 .8em 0 .1em;
}
/*hovering filter buttons (normal)*/
#tag-filters label:hover {
  background: var(--hover-color);
  text-decoration: underline;
}
/*selected filters*/
#tag-filters label:has(input:checked) {
  background: var(--border-color);
  color: var(--post-text);
  text-decoration: underline;
  font-weight: bold;
}
/*hovering selected filters*/
#tag-filters label:has(input:checked):hover {
  background: var(--hover-color);
  text-decoration: none;
}
/*hide the radio button for tags*/
#tag-filters input {appearance: none;}

/*for the "back to top" link at the bottom of the page*/
#page-nav a {color:var(--post-text);}
#page-nav a:hover {text-decoration: none;}

footer {
  color: var(--post-text);
  background: var(--border-color);
  /*in the html the footer is at the very end, but when looking at the site you see it at the bottom of the sidebar!*/
  z-index: 100;
  position: fixed;
  /*make it the same length/positioning as the sidebar*/
  margin-left:22px;
  width:236px;
  bottom:4px;
  font-size: small;
  /*semitransparent so you can see any content that goes under it*/
  opacity:60%;
  text-align: center;
}

@media only screen and (max-width: 800px) {
  .mobile-only {display: block;}
  .pc-only {display: none;}
  #container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
  }
  /*turning the specially positioned elements back to normal*/
  #sidebar,
  main {
    position: static;
    height: auto;
    flex: 100%;
    max-width: none;
  }
  #sidebar {
    border-inline: none;
    margin-left:0;
    padding: 1em;
    padding-bottom:0;
  }
  #icon {
    /*shrink the icon a bit to prioritize text on mobile*/
    max-width:40%;
    /*and add some spacing since they're side-by-side now*/
    margin-right: .5em;
  }
  /*don't let the icon get too big haha*/
  #icon img {max-width: 100%;}
  
  #sidebar nav {margin-block:.5em;}
  
  main {
    left: 0;
    margin-inline: 1em;
  }
  /*this makes the profile text take up more screen-space than the icon image*/
  #profile {flex: 2;}
  #profile p {
    margin-block: 0;
    margin-left:10px;
  }
  /*remove borders from the short bio section*/
  #bio {
    border: none;
    padding-block: 0;
  }
  /*and put the footer at the bottom of the page instead of the sidebar!*/
  footer {
    position:static;
    text-align:center;
    background:none;
    margin:0;
    width:100%;
    opacity:100%;
  }
}